<template>
    <div style="height: 100%" class="warp-2 body-content">
        <navbar :title="$t('circle_kg_1')">
            <template #right>
                <a class="header-icon-more" @click="moreShow = true" v-show="isMan">
                    <ul class="word-btn-list" v-if="moreShow && isMan">
                        <li @click="toTeam(null, false)">{{ $t('circle_kg_2') }}</li>
                    </ul>
                </a>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div style="height: 100%;" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getKnowledgeListByWcId"
                    >
                        <div v-bind:class="{'height100' : total === 0}">
                            <div class="kg-list">
                                <van-swipe-cell v-for="item in list" :key="item.wctId">
                                    <div class="kg-item" @click="toTeam(item.wctId,true, item.role === 'VISITOR')">
                                        <div class="kg-img">
                                            <van-image round width="100%" height="100%" :src="item.wctIsDefultImg ? teamImg : appUrl + item.wctImage"/>
                                        </div>
                                        <div class="kg-info">
                                            <div>{{ item.wctName }}</div>
                                            <div><span>{{ item.wctCreateDatetime | dateHandle }}</span><span>{{ $t('circle_kg_3', {'value': item.peopleCount}) }}</span></div>
                                        </div>
                                    </div>
                                    <template slot="right" v-if="item.role !== 'VISITOR'">
                                        <van-button square type="info" :text="$t('circle_kg_4')" class="handle-btn" v-if="item.role === 'GZLEADER' || item.role === 'MANAGER' || item.role === 'T-MANAGER'" @click="toTeam(item.wctId, false)"/>
                                        <van-button square type="danger" :text="$t('circle_kg_5')" class="handle-btn" v-if="item.role === 'GZLEADER' || item.role === 'MANAGER' || item.role === 'T-MANAGER'" @click="deleteTeam(item.wctId)"/>
                                    </template>
                                </van-swipe-cell>
                            </div>
                            <div v-if="!isLoading && total === 0" style="height:100%;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
        <div class="mask-white" v-if="moreShow" @click="moreShow = false"></div>
    </div>
</template>

<script>
import {cwnEncrypt} from '@/utils/tools';
import { Image, SwipeCell, Button, Dialog, Toast } from 'vant';
import team from '../../../../static/images/team.png';
export default {
    name: 'KnowledgeList',
    components: {
        vanImage: Image,
        vanSwipeCell: SwipeCell,
        vanButton: Button,
        vanDialog: Dialog,
        vanToast: Toast
    },
    data() {
        return {
            total: 0,
            pageNo: 0,
            list: [],
            isLoading: false,
            moreShow: false,
            wcId: this.$route.params.wcId,
            teamImg: team,
            isMan: this.$store.state.circle.circleRole === 'GZLEADER',
            finished: false,
            isRefresh: false
        };
    },
    filters: {
        dateHandle(value) {
            let date = value.split(' ');
            return date[0];
        }
    },
    methods: {
        ...{ cwnEncrypt },
        deleteTeam(wctId) {
            Dialog.confirm({
                message: this.$t('circle_kg_6')
            }).then(() => {
                this.$axios.delete(`/app/api/trainee/work-circle/team/${wctId}`).then(res => {
                    Toast({message: this.$t('circle_kg_7'), forbidClick: true});
                    this.list = [];
                    this.isLoading = true;
                    this.onPulldownTop();
                });
            });
        },
        toTeam(wctId, isDetail, isFw) {
            if (isFw) {
                Toast({message: this.$t('circle_kg_73'), forbidClick: true});
                return;
            }
            let data = {
                wctWcId: this.cwnEncrypt(this.wcId)
            };
            if (wctId !== null && wctId !== undefined) {
                data.wctId = this.cwnEncrypt(wctId);
            }
            if (isDetail) {
                this.$router.push({path: '/circle/knowledge/knowledgeDetail', query: data});
            } else {
                this.$router.push({path: '/circle/knowledge/addTeam', query: data});
            }
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getKnowledgeListByWcId('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getKnowledgeListByWcId(option) {
            this.$axios.get(`/app/api/trainee/work-circle/team/page/${this.wcId}`, {
                params: {
                    pageNo: this.pageNo
                }
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results;
                    } else {
                        this.list = [...this.list, ...res.data.results];
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.list.length >= this.total) {
                    this.finished = true;
                }
            });
        }
    },
    created() {
        this.isLoading = true;
        this.onPulldownTop();
    }
};
</script>
<style scoped lang="less">
    .kg-item {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 10px 15px;
        border-bottom: 2px #F0F0F0 solid;
        .kg-img {
            width: 60px;
            height: 60px;
            margin-right: 15px;
        }
        .kg-info {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            height: 60px;
            justify-content: space-between;
            &>div:first-child {
                padding-top: 5px;
            }
            &>div:last-child {
                color: #ACACAC;
                font-size: 10px;
                padding-bottom: 5px;
                &>span:first-child {
                    margin-right: 15px;
                }
            }
        }
    }
    .handle-btn {
        height: 100%;
    }
    .overwrite-title {
        display: flex;
        align-content: center;
        justify-content: center;
        height: 55px;
        line-height: 55px;
        font-size: 18px;
        color: #333;
    }
    .word-btn-list {
        width: 80px;
        padding: 2px 15px;
        background: #ffffff;
        border-radius: 2px;
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 100;
        box-shadow: 0 1px 2px #cccccc;
        text-align: center;
        li {
            // padding: 15px 0;
            border-bottom: 1px solid #e6e6e6;
            font-size: 14px;
            color: #1a1a1a;
            &:nth-last-child(1) {
                border-bottom: 0;
            }
        }
    }
    .mask-white {
        width: 100%;
        height: 100%;
        background: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .header-icon-more {
        position: relative;
    }
</style>
